<!--
 * @Author: 黑白灰01 3193273703@qq.com
 * @Date: 2025-01-27 11:21:00
 * @LastEditors: 黑白灰01 3193273703@qq.com
 * @LastEditTime: 2025-02-13 19:56:03
 * @FilePath: /hei_picture_web/src/components/common/GlobalHeader/HaederIndex.vue
 * @Description: 全局头部
-->
<template>
  <div class="global-header">
    <a-flex style="width: 100" justify="space-between" align="center">
      <h3 class="logo">logo</h3>
      <a-menu
        class="menu"
        v-model:selectedKeys="current"
        mode="horizontal"
        :items="menuData"
        @click="gotoPage"
      ></a-menu>
      <UserInfo />
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import { type MenuProps } from 'ant-design-vue'
import { h, ref, onMounted } from 'vue'
import { HomeOutlined, PictureOutlined, ReadOutlined, MenuOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import UserInfo from './modal/userInfo.vue'
const router = useRouter()
router.afterEach((to) => {
  // Handle dynamic space routes by setting the active menu item to /space
  if (to.path.startsWith('/space')) {
    current.value = ['/space']
  } else {
    current.value = [to.path]
  }
})
const current = ref<string[]>(['/'])

const menuData = ref<MenuProps['items']>([
  {
    key: '/',
    label: '首页',
    icon: () => h(HomeOutlined),
  },
  {
    key: '/picture_add',
    icon: () => h(PictureOutlined),
    label: '图片管理',
  },
  {
    key: '/space',
    icon: () => h(MenuOutlined),
    label: '空间管理',
  },
  {
    key: '/blog',
    icon: () => h(ReadOutlined),
    label: '博客',
  },
])
const gotoPage = ({ key }: { key: string }) => {
  router.push(key)
}
onMounted(() => {
  current.value = [router.currentRoute.value.path]
})
</script>

<style scoped lang="scss">
.global-header {
  width: 100%;
  height: 48px;
  box-shadow: 0 2px 8px #f0f1f2;
  .logo {
    font-size: 24px;
    font-weight: bold;
    margin: 0 20px;
  }
  .menu {
    background-color: transparent;
    line-height: 48px;
  }
}
</style>
